<template>
  <div class="box">
      <div class="header" >
          <span class="bt">首页</span>
          <div class="cent">
              <van-icon color="white" name="location-o" class="tuu" size="40"/>
              <img class="log" src="../../public/logo/white.png" alt="">
              <van-search class="search" v-model="value" placeholder="请输入搜索关键词" />
              <van-icon name="shop-o" size="40" class="tuu" color="white" />

          </div>
          <van-tabs background="rgba(255, 68, 0, 0.699)" title-active-color="white" title-inactive-color="#ccc">
            <van-tab v-for="index in 5" title="家用电器"/>
          </van-tabs>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>
<ul>
    <li>
        <span><van-icon name="goods-collect" size="40"  /></span>
        <span>限时秒杀</span>
    </li>
    <li>
        <span><van-icon name="goods-collect" size="40"  /></span>
        <span>畅销商品</span>
    </li>
    <li>
        <span><van-icon name="goods-collect" size="40" /></span>
        <span>品质大牌</span>
    </li>
    <li>
        <span><van-icon name="goods-collect" size="40" /></span>
        <span>小u自营</span>
    </li>
    <li>
        <span><van-icon name="goods-collect" size="40" /></span>
        <span>积分商城</span>
    </li>
</ul>
<div class="tupi">
    <div class="left">
        <img class="leftu" src="../../public/kingkong/big.png" alt="">

    </div>
    <div class="right">
        <img src="../../public/kingkong/small.png" class="rigtu" alt="">
        <img src="../../public/kingkong/02.png" class="rigtu" alt="">

    </div>
</div>
<van-tabs v-model="active">
  <van-tab title="标签 1" class="hen">
      <img class="ty" src="../../public/commodity/01.png" alt="">
      <img  class="ty" src="../../public/commodity/02.png" alt="">
      <img class="ty" src="../../public/commodity/03.png" alt="">
      <img class="ty" src="../../public/commodity/04.png" alt="">
      <img class="ty" src="../../public/commodity/05.png" alt="">
       </van-tab>
  <van-tab title="标签 2"></van-tab>
  
</van-tabs>


<van-tabs type="card">
  <van-tab title="热门推荐">
      <div class="he">
          <div class="hlef">
              tupian

          </div>
          <div class="hrig">
              <button>购买</button>

          </div>

      </div>
  </van-tab>
  <van-tab title="上新推荐"></van-tab>
  <van-tab title="全部商品"></van-tab>
</van-tabs>
  </div>
</template>

<script>
export default {
    data() {
    return {
     
    };
  },

}
</script>

<style>
.box{
    margin-bottom: 50px;
}
.he{
    display: flex;
}
.tuu{
    width: 40px;
    height: 40px;
    margin-right: 20px;
}
.hen{
    display: flex;

}
.ty{
    width: 110px;
    height: 60px;
    /* flex: 1; */
}
.leftu{
    width: 250px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
.header{
    /* margin-bottom: 50px; */
    background-color:  rgba(255, 68, 0, 0.699);
    /* height: 150px; */
}
.rigtu{
    width: 230px;
}
ul{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
}
.tupi{
    width: 100%;
    display: flex;
}

li{
    justify-items: center;
    align-items: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.log{
   
    margin-right: 20px;
    width: 110px;
    height: 40px;
}
.cent{
    display: flex;
    margin-bottom: 20px;
}
.bt{
    display: inline-block;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}
.search{
    width: 250px;
    height: 40px;
    margin-right: 20px;
}

</style>